<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/personal_center_style.css">
</head>
<body>
     <!-- 导航栏start -->
     <header class="header">
        <div class="container-fluid">
            <div class="header_content">
                <!-- logo图 -->
                <div class="header_logo">
                    <a href="index.html">
                        <img src="images/logo.jpg" alt="LOGO">
                    </a>
                </div>
                <!-- 导航栏搜索 -->
               <form action="#" class="header_search ms-auto">
                    <input type="text" class="form-control" placeholder="搜你想要">
                    <button type="button">
                        <i class="fa fa-search"></i>
                      </button>
                </form>
                <!-- 导航栏中间按钮 -->
                <div class="header_menu">
                    <ul class="header_nav">
                        <li>
                            <a class="header_nav_link" href="index.html" role="button">首页推荐</a>
                        </li>
                        <li>
                            <a class="header_nav_link" href="#" role="button" id="digital-area">数码专区</a>
                        </li>
                        <li>
                            <a class="header_nav_link" href="message.html" role="button">我的消息</a>
                        </li>
                    </ul>
                </div>
                <!-- 导航栏侧边 -->
                <div class="header_action">
                <ul class="header_action_nav">
                    <li>
                        <div class="dropdown">
                            <a class="header_sign dropdown-toggle" id="login_region" href="#" role="button" data-toggle="dropdown" aria-expanded="false">登录/注册</a>
                                <div class="dropdown-menu" aria-labelledby="login">
                                    <a class="dropdown-item" id="dropdown-login-item" href="login.html">登录</a>
                                    <a class="dropdown-item" id="dropdown-exit-item" >退出</a>
                                </div>
                        </div>
                    </li>
                    <li>
                        <a class="header_sign" role="button" id="person_center">个人中心</a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航end -->

    <!-- 页面主体 -->
    <div class="main-area">
        <div class="person_center_title">
            <span>个人中心</span>
            <div class="empty-div"> </div>
        </div>
        <div class="row">
            <div class="col-2 security-left">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"><span><i class="fa fa-user" aria-hidden="true"></i>我的资料</span></a>
                    <a class="nav-link" id="v-pills-collect-tab" data-toggle="pill" href="#v-pills-collect" role="tab" aria-controls="v-pills-collect" aria-selected="false"><span><i class="fa fa-star" aria-hidden="true"></i>我的收藏</span></a>
                    <a class="nav-link" id="v-pills-address-tab" data-toggle="pill" href="#v-pills-address" role="tab" aria-controls="v-pills-address" aria-selected="false"><span><i class="fa fa-map-marker" aria-hidden="true"></i>收货地址</span></a>
                    <a class="nav-link" id="v-pills-myorder-tab" data-toggle="pill" href="#v-pills-myorder" role="tab" aria-controls="v-pills-myorder" aria-selected="false"><span><i class="fa fa-credit-card" aria-hidden="true"></i>我的订单</span></a>
                    
                </div>
            </div>
            <div class="col-10 security-right">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <div class="el-form-user-profile el-form-item">
                            <div class="el-form-item-name">
                                <label class="center-info">我的头像:</label>
                            </div>
                            <div class="profile-img-area">
                                <img id="user_profile" src="images/profiletest.jpg">
                            </div>
                            <div class="change-profile">
                                <button type="button" class="btn btn-info" onclick="getFile()">选择本地图片</button>
                                <input style="display: none" type="file"  name="file" id="getF" onchange="clickF()">
                            </div>
                       </div>
                       <div class="el-form-user-name el-form-item">
                            <div class="el-form-item-name">
                                <label class="center-info">用户名:</label>
                            </div>
                            <span  id="user_name_show" >dsadasd </span>
                        </div>
                        <div class="el-form-user-email el-form-item">
                            <div class="el-form-item-name">
                                <label class="center-info">我的邮箱:</label>
                            </div>
                            <span class="user-email-info">19146546593@qq.com</span>
                        </div>
                        <div class="el-form-user-sex el-form-item">
                            <div class="el-form-item-name">
                                <label class="center-info">性别:</label>
                            </div>
                            <div class="choose-sex">
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="male" name="customRadio" class="custom-control-input sex-radio">
                                    <label class="custom-control-label" for="male">男</label>
                                </div>
                                <div class="custom-control custom-radio female-radio">
                                    <input type="radio" id="female" name="customRadio" class="custom-control-input sex-radio">
                                    <label class="custom-control-label" for="female">女</label>
                                </div>
                            </div>
                        </div>
                        <div class="el-form-user-phone el-form-item">
                            <div class="el-form-item-name">
                                <label class="center-info">联系电话:</label>
                            </div>
                            <input type="text" id="user_phone_show" class="form-control" placeholder="" aria-label="phonenum" aria-describedby="addon-wrapping">
                        </div>
                        <button type="button" class="btn btn-warning submit-button">保存修改</button>
                    </div>
                    <!-- 收藏 -->
                    <div class="tab-pane fade" id="v-pills-collect" role="tabpanel" aria-labelledby="v-pills-collect-tab">
                        
                    </div>
                    <!-- 收货地址 -->
                    <div class="tab-pane fade ship-address-area" id="v-pills-address" role="tabpanel" aria-labelledby="v-pills-address-tab">
                        <div class="ship-address-title" data-toggle="modal" data-target="#add-ship-address">
                            <i class="fa fa-plus" aria-hidden="true"></i>新增收货地址
                        </div>
                        <div class="address-show-area">
                            <table class="table table-bordered" style="table-layout: fixed;word-break:break-all;">
                                <thead>
                                  <tr>
                                    <th scope="col" style="width: 5%;">#</th>
                                    <th scope="col" style="width: 20%;">收货人</th>
                                    <th scope="col" style="width: 35%;">收货地址</th>
                                    <th scope="col" style="width: 25%;">电话号码</th>
                                    <th scope="col" style="width: 15%;">操作</th>
                                  </tr>
                                </thead>
                                <tbody id="address-show-tbody">
                                  
                                </tbody>
                              </table>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="add-ship-address" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="staticBackdropLabel">创建地址</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="address-info-in">
                                            <form>
                                                <div class="form-group">
                                                    <label for="address-info-title">收货地址：</label>
                                                    <input class="form-control" id="address-info" >                                       
                                                </div>
                                                <div class="form-group">
                                                    <label for="consignee-name-title">收货人姓名：</label>
                                                    <input class="form-control" id="consignee-name">    
                                                </div>
                                                <div class="form-group">
                                                    <label for="consignee-phone-title">电话号码：</label>
                                                    <input class="form-control" id="consignee-phone">
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" id="add-address-btn" data-dismiss="modal">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>  
                    <!-- 订单  -->
                    <div class="tab-pane fade" id="v-pills-myorder" role="tabpanel" aria-labelledby="v-pills-myorder-tab">
                        我的订单
                    </div>
                   
                </div>
            </div>
        </div>
    </div>


    <!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
    <!-- Section: Social media -->
    <section
      class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
    >
      <!-- Left -->
      <div class="me-5 d-none d-lg-block">
        <span>Get connected with us on social networks:</span>
      </div>
      <!-- Left -->
  
      <!-- Right -->
      <div>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-facebook-f"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-twitter"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-google"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-instagram"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-linkedin"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-github"></i>
        </a>
      </div>
      <!-- Right -->
    </section>
    <!-- Section: Social media -->
  
    <!-- Section: Links  -->
    <section class="">
      <div class="container text-center text-md-start mt-5">
        <!-- Grid row -->
        <div class="row mt-3">
          <!-- Grid column -->
          <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
            <!-- Content -->
            <h6 class="text-uppercase fw-bold mb-4">
              <i class="fas fa-gem me-3"></i>租好玩
            </h6>
            <p>
                投资有风险，购买需谨慎
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              产品
            </h6>
            <p>
              <a href="#!" class="text-reset">数码</a>
            </p>
            <p>
              <a href="#!" class="text-reset">生活</a>
            </p>
            <p>
              <a href="#!" class="text-reset">娱乐</a>
            </p>
            <p>
              <a href="#!" class="text-reset">工作</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              关于我们
            </h6>
            <p>
              <a href="#!" class="text-reset">经营证照</a>
            </p>
            <p>
              <a href="#!" class="text-reset">平台协议</a>
            </p>
            <p>
              <a href="#!" class="text-reset">隐私政策</a>
            </p>
            <p>
              <a href="#!" class="text-reset">免责声明</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              联系我们
            </h6>
            <p><i class="fa fa-home me-3"></i> New York, NY 10012, US</p>
            <p>
              <i class="fa fa-envelope me-3"></i>
              zuhaowan@example.com
            </p>
            <p><i class="fa fa-phone me-3"></i> + 01 234 567 88</p>
            <p><i class="fa fa-print me-3"></i> + 01 234 567 89</p>
          </div>
          <!-- Grid column -->
        </div>
        <!-- Grid row -->
      </div>
    </section>
    <!-- Section: Links  -->
  
    <!-- Copyright -->
    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
      © 2021 Copyright:
      <a class="text-reset fw-bold" href="#">zuhaowan.com</a>
    </div>
    <!-- Copyright -->
  </footer>
  <!-- Footer -->
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle461.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/API/personalCenter.js"></script>
<script>
    function getFile(){
      $("#getF").click();
    }
    var filename="";
    function clickF() {
        var files = event.target.files, file;
        if (files && files.length > 0) {
        // 获取目前上传的文件
            file = files[0];// 文件大小校验的动作
            if(file.size > 1024 * 1024 * 10) {
                alert('图片大小不能超过 10MB!');
                return false;
            }
            // 获取 window 的 URL 工具
            var URL = window.URL || window.webkitURL;
            // 通过 file 生成目标 url  获取真实的路径
            var imgURL = URL.createObjectURL(file);
            //用attr将img的src属性改成获得的url
            $("#user_profile").attr("src",imgURL);
            
            // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
            // URL.revokeObjectURL(imgURL);
	    }
    }
  </script>
    <script>
        $("#person_center").click(function(){
            if($.cookie("status")==0){
                alert("请先登录！");
                return
            }
            else if($.cookie("status")==1){
                window.open("personalCenter.html");
            }
        })
    </script>
</html>